<template>
  <div class="goodsitemName">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="padding-left:25px">商品分类</span>
      </div>
      <el-row class="tac">
        <el-menu
          :unique-opened="true"
          active-text-color="#000"
          default-active="activeMenu"
          class="el-menu-vertical-demo"
          @select="handleSelect"
        >
            <el-menu-item :index="item.type" v-for="(item,index) in menuitemName" :key="index">{{item.type}}</el-menu-item>
        </el-menu>
      </el-row>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: "cardItem",
    data() {
      return {
        activeMenu: '0',
        menuitemName: this.$store.state.menu
      };
    },
    computed: {
      getMenuitemName() {
        return this.$store.state.menu
      }
    },
    watch: {
      getMenuitemName(val,oldVal) {
        this.menuitemName = val
      }
    },
    methods: {
      handleSelect(key, keyPath) {
        this.$store.state.routerActive = ['/category/category?name='+key,key];
        this.$router.push(
          {
            path: '/category/category', query: {name: key}
          }
        )
      },
    },
    mounted() {
      this.activeMenu = '0'
    }
  };
</script>

<style lang="less">
  .goodsitemName {
    width: 285px;
    height: 700px;

    .box-card {
      border-radius: 12px;

      .tac {
        text-decoration: none;
        padding-left: 0px;

        .el-menu {
          border-right: none;
        }
      }
    }

    .el-collapse-item__header {
      border-bottom: 1px solid #dcdfe6;
    }

    .sidebar-widget ul li.active > a {
      color: #eb3e32;
    }

    .el-icon-location:before {
      content: none;
    }
  }
</style>
